<template>
  <div class="servicesNoFilter">
    <el-popover ref="popover-tree" placement="bottom-start" visible-arrow="false" trigger="click">
      <el-input
        size="mini"
        slot="reference"
        v-model="inputValue"
        :placeholder="$t('public.searchByServiceNos')"
        @focus="inputFocus"
      >
        <i
          class="el-input__icon el-icon-close"
          slot="suffix"
          @click="handleInputIconClick">
        </i>
      </el-input>
      <div class="checkbox-wrap">
        <div v-if="siftedServiceNos.length > 0">
          <el-checkbox  v-model.trim="checkAllState" @change="CheckAllChange">{{$t('public.checkAll')}}</el-checkbox>
        </div>
        <div v-if="siftedServiceNos.length === 0" class="noService">{{$t('public.noServiceTip')}}</div>
        <el-checkbox-group v-model.trim="getCheckedNos" @change="serveNoChange">
          <template v-for="one in getSeviceNos">
            <div v-if="one.isShow" class="serviceNumWrap" :key="one.Exten">
              <el-checkbox :label="one.Exten">{{one.Exten}}<span v-if="one.DisplayName">[<span class="serviceName ellipsis">{{one.DisplayName}}</span>]</span></el-checkbox>
            </div>
          </template>
        </el-checkbox-group>
      </div>
    </el-popover>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils.js'
  import { intersection } from 'lodash'
  export default {
    name: 'servicesNoFilter',
    data () {
      return {
        inputValue: '',
        getCheckedNos: [],
        getSeviceNos: [],
        siftedServiceNos: [],
        checkAllState: true
      }
    },
    props: {
      serviceNos: {
        type: Array,
        default: []
      },
      checkedNos: {
        type: Array,
        default: []
      }
    },
    watch: {
      // 监测搜索框变化筛选服务号
      inputValue (val) {
        this.siftedServiceNos = []
        this.getSeviceNos.forEach((item, index) => {
          if (item.Exten.indexOf(val) > -1 || item.DisplayName.indexOf(val) > -1) {
            this.getSeviceNos[index].isShow = true
            this.siftedServiceNos.push(item.Exten)
          } else {
            this.getSeviceNos[index].isShow = false
          }
        })
        this.checkAllStateChange()
      },
      // 选择值变化同步上级选择服务号
      getCheckedNos () {
        this.$emit('serveNoFilterChange', this.getCheckedNos)
      },
      // 监测上级选择服务号数据 使绑定值等于上级勾选数据
      checkedNos () {
        this.getCheckedNos = this.checkedNos
      }
    },
    methods: {
      // icon点击清空搜索框
      handleInputIconClick () {
        this.inputValue = ''
      },
      // 选择服务号执行的方法
      serveNoChange () {
        this.checkAllStateChange()
      },
      // 搜索框获取焦点执行的方法
      inputFocus () {
        this.checkAllStateChange()
      },
      // 全选是否勾选执行的方法
      CheckAllChange () {
        if (this.siftedServiceNos.length > 0) {
          if (this.checkAllState) {
            this.siftedServiceNos.forEach(one => {
              if (this.getCheckedNos.indexOf(one) === -1) {
                this.getCheckedNos.push(one)
              }
            })
          } else {
            this.siftedServiceNos.forEach(one => {
              if (this.getCheckedNos.indexOf(one) > -1) {
                this.getCheckedNos.splice(this.getCheckedNos.indexOf(one), 1)
              }
            })
          }
        }
      },
      // 判断全选是否勾选
      checkAllStateChange () {
        let siftedServiceNosLength = this.siftedServiceNos.length
        let siftedServiceNosIntersectLength = intersection(this.siftedServiceNos, this.getCheckedNos).length
        if (siftedServiceNosLength === siftedServiceNosIntersectLength && siftedServiceNosLength <= this.getCheckedNos.length) {
          this.checkAllState = true
        } else {
          this.checkAllState = false
        }
      }
    },
    beforeMount () {
      this.getCheckedNos = this.checkedNos
      this.getSeviceNos = deepClone(this.serviceNos)
      for (let i in this.getSeviceNos) {
        this.getSeviceNos[i].isShow = true
      }
      this.siftedServiceNos = []
      this.getSeviceNos.forEach((item, index) => {
        if (item.Exten.indexOf('') > -1 || item.DisplayName.indexOf('') > -1) {
          this.getSeviceNos[index].isShow = true
          this.siftedServiceNos.push(item.Exten)
        } else {
          this.getSeviceNos[index].isShow = false
        }
      })
      this.checkAllStateChange()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .el-checkbox
    padding-right 0
  .checkbox-wrap
    min-width 198px
    height 200px
    overflow-y scroll
  .serviceNumWrap
    line-height 24px
    height 24px
    .serviceName
      max-width 72px
      display inline-block
      position relative
      top 5px
  .noService
    text-align center
    line-height 24px
    color $cf-gray5
</style>
